<template>
	<el-menu :default-active="active" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#344058" text-color="#fff" active-text-color="#ffd04b">
		<!-- <el-submenu index="1">
			<template slot="title">
				<i class="el-icon-location"></i>
				<span>导航一</span>
			</template>
			<el-menu-item-group>
				<el-menu-item index="1-1">选项1</el-menu-item>
				<el-menu-item index="1-2">选项2</el-menu-item>
			</el-menu-item-group>
		</el-submenu> -->
		<el-menu-item index="/">
			<i class="el-icon-star-off"></i>
			<span slot="title">首页</span>
		</el-menu-item>
		<el-menu-item index="/problem">
			<i class="el-icon-menu"></i>
			<span slot="title">知识库</span>
		</el-menu-item>
		<div v-if="userInfo.RoleID!='Admin'">
		<el-menu-item index="/rules">
			<i class="el-icon-setting"></i>
			<span slot="title">规则库</span>
		</el-menu-item>
		</div>
		<div v-if="userInfo.RoleID=='Admin'">
		<el-menu-item index="/user">
			<i class="el-icon-setting"></i>
			<span slot="title">用户管理</span>
		</el-menu-item>
		</div>
	</el-menu>
</template>

<script>
export default {
  name: "app-side",
  data() {
    return {
			active: "",
			RoleID:null,
			userInfo:{
				RoleID:null
			}
    };
  },
  mounted: function() {
    this.active = "/" + window.location.href.split("/")[4];
		console.log(this.getCookie("userInfo"));
		this.userInfo=JSON.parse(this.getCookie("userInfo"))
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style>
</style>